<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="ticketStore.getList()"
    :columns="columns"
    :pagination="ticketStore.page"
    :loading="ticketStore.page.loading"
    @page-change="({ current }) => ticketStore.reset(current)"
    hover
  >
    <template #id="{ row }">
      <b>{{ row.id }}</b>
    </template>
    <template #type="{ row }">
      <t-tag :theme="row.type == 'ticket' ? 'warning' : (row.type == 'print' ? 'primary' : 'danger')" variant="outline">
        {{ plugin.t('ticket.type_text.' + row.type) }}
      </t-tag>
    </template>
    <template #amount="{ row }">
      {{ app.money.format(row.amount) }}
    </template>
    <template #status="{ row }">
      <t-tag>{{ row.status }}</t-tag>
    </template>
    <template #time="{ row }">
      {{ row.created_at.date() }}
    </template>
    <template #right="{ row }">
      <t-dropdown :min-column-width="88" trigger="click" @click="item => emit(item.value, row)">
        <t-button theme="primary" variant="text">
          {{ $t('common.active') }} 
          <template #suffix><t-icon name="chevron-down" size="14" /></template>
        </t-button>
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item value="view">{{ $t('common.view') }}</t-dropdown-item>
          </t-dropdown-menu>
        </template>
      </t-dropdown>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import ticketStore from '../../store/ticket'

  const emit = defineEmits(['print', 'view'])
  const plugin = index.plugin
  const columns = [{
    title: 'ID',
    colKey: 'id',
    cell: 'id',
    width: 300
  }, {
    title: plugin.t('ticket.number'),
    colKey: 'number'
  }, {
    title: plugin.t('ticket.type'),
    colKey: 'type',
    cell: 'type'
  }, {
    title: plugin.t('ticket.tbai'),
    colKey: 'tbai',
    width: 350
  }, {
    title: plugin.t('ticket.amount'),
    colKey: 'amount',
    cell: 'amount',
    align: 'center'
  }, {
    title: plugin.t('ticket.status'),
    colKey: 'status',
    cell: 'status'
  }, {
    title: plugin.t('ticket.time'),
    colKey: 'time',
    cell: 'time',
    width: 120
  }, {
    colKey: 'right',
    align: 'right',
    cell: 'right',
    fixed: 'right'
  }]

  ticketStore.get()
</script>